// 班级概括
axios.get('/student/overview').then(({ data }) => {
    if (data.code === 0) {
        $('.overview .total').text(data.data.total)
        $('.overview .avgSalary').text(data.data.avgSalary)
        $('.overview .avgAge').text(data.data.avgAge)
        $('.overview .proportion').text(data.data.proportion)
    }
})
// *******************************************************************************

// 柱状图数据
$('.bar .btn').click(function () {
    // 点击三个点，切换现实和隐藏
    $('#batch').toggle()
})
// 给每个li触发点击事件
$('#batch li').on('click', function () {
    // 下标加一，就是每次考试,单击的是哪个li
    let batch = $(this).index() + 1;
    axios.get('/score/batch', { params: { batch } }).then(({ data }) => {
        if (data.code === 0) {
            barChart(data.data)
        }

    })
})
// 为了让初始页面有数据，触发一下第一次成绩的点击事件
$('#batch li').eq(0).trigger('click')
// ******************************************************************************

// 折线图数据和地图数据
axios.get('/student/list').then(({ data }) => {
    // 如果请求成功，就执行代码
    if (data.code === 0) {
        // 声明一个对象，里面放三个空数组用于储存数据
        let lineData = {
            name: [],
            salary: [],
            truesalary: [],
        }
        // 地图数据，和请求学员用的一个地址
        let a = { '顺义校区': [116.4551, 40.2539] }
        let b = []

        //饼图数据 
        let arr = []
        // 每遍历一个就往数组里添加一个 折线图数据
        data.data.forEach(item => {
            lineData.name.push(item.name)
            lineData.salary.push(item.salary)
            lineData.truesalary.push(item.truesalary)

            // 地图添加数据
            a[item.city] = [item.jing, item.wei];
            b.push([{ name: item.city, value: 0 }])

            // 饼图添加数据
            let i = arr.findIndex(v => {
                return v.name === item.province
            })
            if (i >= 0) {
                arr[i].value++
            } else {
                arr.push({ value: 1, name: item.province })
            }
        })
        // 调用折线图方法，并传参
        lineChart(lineData);
        // 调用地图方法，并传参
        mapChart(a, b)
        // 调用饼图方法 ,并传参
        pieChart(arr)
    }

})
// **********************************************************************


// 饼图
function pieChart(arr) {
    let myChart = echarts.init($('.pie')[0])
    let option = {

        title: {
            text: '籍贯 Hometown',
            textStyle: {
                color: '#6d767e'
            }
        },
        tooltip: {
            formatter: '{a} <br />{b} <strong>{c}</strong>人 占比{d}%'
        },
        series: [
            {
                name: '各地人员分布',
                type: 'pie',
                radius: ['10%', '60%'],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 4
                },
                data: arr
            }
        ]
    };
    myChart.setOption(option);
}

// 柱图
function barChart({ avgScore, group, lt60, gt60, gt80 }) {
    let myChart = echarts.init($('.barChart')[0])
    let option = {
        // 网格
        grid: {
            top: 30,
            button: 30,
            left: '7%',
            right: '7%',
        },
        // 鼠标移入
        tooltip: {
            trigger: 'axis', //触发方式，axis表示轴触发，item表示每一项
            axisPointer: {  //坐标轴指示配置项
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        // 图例
        legend: {
            // data: ['Evaporation', 'Precipitation', 'Temperature']
        },
        // x轴
        xAxis: [
            {
                type: 'category',
                data: group,
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        // y轴
        yAxis: [
            {
                type: 'value',
                min: 0, //y轴数据最小值
                max: 100,  //y轴数据最大值
                interval: 10,  //步长，把y轴分多少份
                axisLabel: {
                    formatter: '{value} 分' //文字
                }
            },
            {
                type: 'value',
                min: 0,
                max: 10,
                interval: 1,
                axisLabel: {
                    formatter: '{value}人'
                }
            }
        ],
        // 数据部分
        series: [
            {
                name: '平均分',
                type: 'bar',
                barWidth: 15,
                data: avgScore
            },
            {
                name: '低于60分人数',
                type: 'bar',
                yAxisIndex: 1, //y轴索引，1表示第二个y轴
                barWidth: 15,
                data: lt60
            },
            {
                name: '60-80分之间',
                type: 'bar',
                yAxisIndex: 1,
                barWidth: 15,
                data: gt60
            },
            {
                name: '高于80分人数',
                type: 'bar',
                yAxisIndex: 1,
                barWidth: 15,
                data: gt80
            }
        ]
    };
    myChart.setOption(option);
}

// 折线图
function lineChart({ name, salary, truesalary }) {
    let myChart = echarts.init($('.line')[0]);
    let option = {
        // 图例
        legend: {
            top: 20,
        },
        // 鼠标移入的提示
        tooltip: {
            trigger: 'axis',
            position: function (pt) {
                return [pt[0], '10%'];
            }
        },
        // 标题
        title: {
            text: '薪资 Salary',
            textStyle: {
                color: '#6d767e'
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: name,
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '50%']
        },
        // 数据缩放组件
        dataZoom: [
            // {
            //   type: 'inside', // 将拖动的条内置到轴里面，看不见了，但是可以拖动
            //   start: 0,
            //   end: 10
            // },
            {
                type: 'slider', // 拖动条显示到轴的外面（默认就是slider类型）
                start: 0, // 拖动滑块起始位置（这是一个百分比）
                end: 15 // 拖动滑块结束位置（这是一个百分比）
            }
        ],
        // 数据部分
        series: [
            {
                name: '期望薪资',
                type: 'line',
                smooth: true, // 表示使用平滑曲线
                symbol: 'none', // 线上拐点位置的样式，none表示没有；也可以是实心圆、空心圆、方块.....
                itemStyle: { // 单独控制这条线的颜色
                    color: 'rgb(255, 70, 131)'
                },
                data: salary
            },
            {
                name: '实际薪资',
                type: 'line',
                smooth: true,
                symbol: 'none',
                itemStyle: { // 单独控制这条线的颜色
                    color: 'rgb(55, 131, 70)'
                },
                data: truesalary
            }
        ]
    };
    myChart.setOption(option);
}

// 地图
function mapChart(a, b) {
    let myChart = echarts.init($('.map')[0]);
    var chinaGeoCoordMap = a
    var chinaDatas = b
    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            var fromCoord = chinaGeoCoordMap[dataItem[0].name];
            var toCoord = [116.4551, 40.2539];
            if (fromCoord && toCoord) {
                res.push([{
                    coord: fromCoord,
                    value: dataItem[0].value
                }, {
                    coord: toCoord,
                }]);
            }
        }
        return res;
    };
    var series = [];
    [['顺义校区', chinaDatas]].forEach(function (item, i) {
        series.push({
            type: 'lines',
            zlevel: 2,
            effect: {
                show: true,
                period: 4, //箭头指向速度，值越小速度越快
                trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                symbol: 'arrow', //箭头图标
                symbolSize: 5, //图标大小
            },
            lineStyle: {
                normal: {
                    width: 1, //尾迹线条宽度
                    opacity: 1, //尾迹线条透明度
                    curveness: .3 //尾迹线条曲直度
                }
            },
            data: convertData(item[1])
        }, {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: { //涟漪特效
                period: 4, //动画时间，值越小速度越快
                brushType: 'stroke', //波纹绘制方式 stroke, fill
                scale: 4 //波纹圆环最大限制，值越大波纹越大
            },
            label: {
                normal: {
                    show: true,
                    position: 'right', //显示位置
                    offset: [5, 0], //偏移设置
                    formatter: function (params) {//圆环显示文字
                        return params.data.name;
                    },
                    fontSize: 13
                },
                emphasis: {
                    show: true
                }
            },
            symbol: 'circle',
            symbolSize: function (val) {
                return 5 + val[2] * 5; //圆环大小
            },
            itemStyle: {
                normal: {
                    show: false,
                    color: '#f00'
                }
            },
            data: item[1].map(function (dataItem) {
                return {
                    name: dataItem[0].name,
                    value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
                };
            }),
        },
            //被攻击点
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: {
                    period: 4,
                    brushType: 'stroke',
                    scale: 4
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        //offset:[5, 0],
                        color: '#0f0',
                        formatter: '{b}',
                        textStyle: {
                            color: "#0f0"
                        }
                    },
                    emphasis: {
                        show: true,
                        color: "#f60"
                    }
                },
                symbol: 'pin',
                symbolSize: 50,
                data: [{
                    name: item[0],
                    value: chinaGeoCoordMap[item[0]].concat([10]),
                }],
            }
        );
    });

    let option = {
        title: {
            text: '来京路线 Form',
            textStyle: {
                color: '#6d767e'
            }
        },
        tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(166, 200, 76, 0.82)',
            borderColor: '#FFFFCC',
            showDelay: 0,
            hideDelay: 0,
            enterable: true,
            transitionDuration: 0,
            extraCssText: 'z-index:100',
            formatter: function (params, ticket, callback) {
                //根据业务自己拓展要显示的内容
                var res = "";
                var name = params.name;
                var value = params.value[params.seriesIndex + 1];
                res = "<span style='color:#fff'>" + name + "</span><br/>数据：" + value;
                return res;
            }
        },
        backgroundColor: "#fff",
        visualMap: { //图例值控制
            min: 0,
            max: 1,
            calculable: true,
            show: false,
            color: ['blue', '#fc9700', '#ffde00', '#ffde00', 'green'],
            textStyle: {
                color: '#fff'
            }
        },
        geo: {
            map: 'china',
            zoom: 1.2,
            label: {
                emphasis: {
                    show: false
                }
            },
            roam: true, //是否允许缩放
            itemStyle: {
                normal: {
                    color: 'pink', //地图背景色
                    borderColor: '#516a89', //省市边界线00fcff 516a89
                    borderWidth: 1
                },
                emphasis: {
                    color: 'rgba(37, 43, 61, .5)' //悬浮背景
                }
            }
        },
        series: series
    };
    myChart.setOption(option);
}

